<template>
  <div>
    <button @click="isShow1 = !isShow1">切换1</button>
    <!-- 
      使用第三方动画库 animate.css
        * 下载包 `npm i animate.css`
        * 入口文件引入 `import "animate.css"`
        * 给需要执行动画的元素添加类:animate__animated
        * 给需要执行动画元素的外层transition添加两个属性
          - enter-active-class:进入时要执行的动画animate__xxxxxxx
          - leave-active-class:离开时要执行的动画animate__xxxxxxx


     -->
    <transition
      enter-active-class="animate__lightSpeedInRight"
      leave-active-class="animate__lightSpeedOutLeft"
    >
      <div v-if="isShow1" class="box animate__animated"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow1: true,
      isShow2: true,
    };
  },
};
</script>

<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: yellowgreen;
}
</style>
